<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        /*
        异步任务-函数封装
        1.定义一个函数
        2.调用核心api
        3.封装
        */

        function runAsync(callback) {
            if (typeof queueMicrotask === 'function') {
                queueMicrotask(callback)
            } else if (typeof MutationObserver === 'function') {
                const obs = new MutationObserver(callback)
                obs.observe(document.body, { childList: true })
                document.body.textContent = '1'
            } else {
                setTimeout(callback, 100)
            }
        }







        const PENDING = 'pending'
        const FULFILLED = 'fulfilled'
        const REJECTED = 'rejected'
        class HMPromise {
            //状态与原因
            state = PENDING
            result = undefined
            //实例属性
            #handlers = []// [{onFulfilled, onRejected}....]
            //构造函数
            constructor(executor) {
                //改状态， pending -> fulfilled
                //记录原因 
                const resolve = (result) => {
                    if (this.state === PENDING) {
                        this.state = FULFILLED
                        this.result = result
                        this.#handlers.forEach(handler => {
                            handler.onFulfilled(this.result)
                        })
                    }
                }
                //改状态， pending -> rejected
                const reject = (result) => {
                    if (this.state === PENDING) {
                        this.state = REJECTED
                        this.result = result
                        this.#handlers.forEach(handler => {
                            handler.onRejected(this.result)
                        })
                    }
                }
                executor(resolve, reject)
            }
            //添加实例方法then
            //2.参数判断
            //2.1成功，//2.2失败回调
            then(onFulfilled, onRejected) {
                onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : x => x
                onRejected = typeof onRejected === 'function' ? onRejected : x => { throw x }

                if (this.state === FULFILLED) {
                    runAsync(() => {
                        onFulfilled(this.result)
                    })
                } else if (this.state === REJECTED) {
                    runAsync(() => {
                        onRejected(this.result)
                    })
                } else if (this.state === PENDING) {
                    this.#handlers.push({
                        onFulfilled: () => {
                            runAsync(() => {
                                onFulfilled(this.result)
                            })
                        },
                        onRejected: () => {
                            runAsync(() => {
                                onRejected(this.result)
                            })
                        }
                    })
                }
            }
        }



        const p = new HMPromise((resolve, reject) => {
            console.log('执行器函数被调用')
            setTimeout(() => {
                console.log('定时器回调')
                resolve('success')
            }, 1000)
            // reject('fail')
        })
        console.log(1)
        p.then(res => {
            console.log('成功', res)
        }, err => {
            console.log('失败', err)
        })
        console.log(2)
    </script>
</body>

</html>